<%@ page language="java" import="java.util.*,entity.*,dao.*,dao.impl.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
 		<title>会员注册</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <style type="text/css">
        	*{
                padding: 0;
                margin: 0;
            }
            #apDiv1{
                width:100%;
                height:50px;
            }
            #apDiv2{
                width:100%;
                height:30px;
                background-color: #e0f0f9;
                text-align:left;
            }
            .style1{
            	font-family: "黑体";
            	font-weight: bold;
            	font-size: 40px;
            	color: #3399cc;
        	}
        	.style2{
            	color: black;
            	font-size: 20px;
        	}
        	.typeface_style{
        		/*color: black;*/
        		font-size: 18px;
        	}
            .board td{
                color:#3399cc;
                font-size: 18px;
            }

        </style>
        <script type="text/javascript">
        	function check_userPass(){
        		var mydiv = document.getElementById("userPass2_error");
        		mydiv.innerHTML="";
        		var userPass=document.getElementById("userPass").value;
        		var userPass2=document.getElementById("userPass2").value;
        		if (userPass!=userPass2) {
        			mydiv.innerHTML="<font color='red'>两次输入密码不一致</font>"
        			return;
        		}
        	}
        	function check_userPass_equal(){
        		var userPass=document.getElementById("userPass").value;
        		var userPass2=document.getElementById("userPass2").value;
        		if (userPass!=userPass2) {
        			alert("密码不一致");
        			return false;
        		}
        		return true;
        	}
        </script>
  </head>
  
  <body>
    <center>
			<div id="apDiv1">
        		<div align="center" class="style1">校园BBS系统</div>
    		</div>
    		<div class="style2" id="apDiv2">
        		&nbsp;您尚未&nbsp;&nbsp;<a href="login.html" target="_blank">登录</a>&nbsp;&nbsp;|
       			&nbsp;&nbsp;<a href="reg.html" target="_blank">注册</a>
    		</div>
			<div id="apDiv4">
				<form name="registerform" action="manage/doReg.jsp" method="post" onsubmit="return check_userPass_equal()">
					<table class="board" width="100%" border="0" cellpadding="15px" cellspacing="15px">
					    <tr>
						  <td align="right" width="47%"><span class = "typeface_style">用户名：</span></td>
						  <td>
						  <input name = "userName" type = "text" id = "userName" required="required" style="height: 28px;width: 180px;font-size: 17px;" maxlength="20"/>
						  </td>
						</tr>
					    <tr>
						  <td align="right" width="47%"><span class = "typeface_style">密码：</span></td>
						  <td>
						  <input name = "userPass" type = "password" id = "userPass" required="required" style="height: 28px;width: 180px;font-size: 20px;" maxlength="20"/>
						  </td>
						</tr>
						<tr>
						  <td align="right" width="47%"><span class = "typeface_style">重复密码：</span></td>
						  <td>
						  <input name = "userPass2" type = "password" id = "userPass2" required="required" style="height: 28px;width: 180px;font-size: 20px;" maxlength="20"
						  onblur="check_userPass()" />
						  <div id="userPass2_error" style="display: inline;"></div>
						  </td>
						</tr>
						<tr>
			    			<td colspan="2" align="center">性别&nbsp;&nbsp;
			        			<input name = "gender" type = "radio" value = "1" checked>男&nbsp;&nbsp;
			        			<input name = "gender" type = "radio" value = "2">女
			     			</td>
			    		</tr>
			    		<tr>
			    			<td colspan="2" align="center">请选择头像</td>
			    		</tr>
			    		<tr>
			    			<td colspan="2" align="center">
			    				<img src="image/head/1.gif" width="50px" />
							    <input type="radio" name = "gif" value = "1" checked>
					       		<img src="image/head/2.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "2">
					       		<img src="image/head/3.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "3">
					       		<img src="image/head/4.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "4">
					       		<img src="image/head/5.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "5">
			    			</td>
			    		</tr>
			    		<tr>
			    			<td colspan="2" align="center">
			    				<img src="image/head/6.gif" width="50px" />
							    <input type="radio" name = "gif" value = "6">
					       		<img src="image/head/7.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "7">
					       		<img src="image/head/8.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "8">
					       		<img src="image/head/9.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "9">
					       		<img src="image/head/10.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "10">
			    			</td>
			    		</tr>
			    		<tr>
			    			<td colspan="2" align="center">
			    				<img src="image/head/11.gif" width="50px" />
							    <input type="radio" name = "gif" value = "11">
					       		<img src="image/head/12.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "12">
					       		<img src="image/head/13.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "13">
					       		<img src="image/head/14.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "14">
					       		<img src="image/head/15.gif" width="50px" />
					       		<input type="radio" name = "gif" value = "15">
			    			</td>
			    		</tr>
			    		<tr>
			    			<td colspan="2" align="center">
			    				<input type = "submit" name = "register" id = "register" value = "登录" style="height:25px;width:50px;"/>
			    			</td>
			    		</tr>
					</table>
				</form>
			</div>
		</center>
  </body>
</html>
